<template>
  <div class="home">
    <heads>
      <template v-slot:left>
        <span @click="$router.go(-1)">返回 </span>
      </template>
      <template v-slot:word>
        <span>图书商城</span>
      </template>
      <template v-slot:add>
        <span></span>
      </template>
    </heads>

    <ul class="booklist">
      <h5>正在看</h5>
      <li
        v-for="(item, index) in $store.state.celllist"
        :key="item.id"
        v-show="item.state == 0"
      >
        <p>{{ item.name }}</p>
        <div>
          <button @click="item.state = 1">标为已读</button
          ><button @click="remove(index)">删除此书</button>
        </div>
      </li>
    </ul>
    <ul class="booklist">
      <h5>已完结</h5>
      <li
        v-for="(item, index) in $store.state.celllist"
        :key="item.id"
        v-show="item.state == 1"
      >
        <p>{{ item.name }}</p>
        <div>
          <button @click="item.state = 0">标为未读</button
          ><button @click="remove(index)">删除此书</button>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import heads from "@/components/Heads.vue";

export default {
  components: {
    heads,
  },
  methods: {
    remove(index) {
      this.$store.commit("remove", index);
    },
  },
};
</script>
<style lang="scss">
.booklist {
  li {
    display: flex;
    justify-content: space-between;
  }
}
</style>
